<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/StoresSystem' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item :to="{ path: '/StoresSystem/FinishedGoods' }">库存商品</el-breadcrumb-item>
      <el-breadcrumb-item>新增库存</el-breadcrumb-item>
      <!-- <el-breadcrumb-item :to="{ path: '/StoresSystem/' }">上架商品</el-breadcrumb-item> -->
    </el-breadcrumb>

    <el-form
      :model="Goodsadd"
      label-width="100px"
      class="demo-Goodsadd"
      ref="Goodsadd"
      style="width: 60%;line-height=''"
    >
      <el-form-item label="商品名称：" prop="name">
        <el-input v-model="Goodsadd.name" style="width: 90%"></el-input>
      </el-form-item>
      <el-form-item label="商品价格：" prop="price">
        <el-input v-model="Goodsadd.price" style="width: 90%"></el-input>
      </el-form-item>
      <el-form-item label="商品数量：" prop="price">
        <el-input v-model="Goodsadd.num" style="width: 90%"></el-input>
      </el-form-item>
      <el-form-item label="商品门店：">
        <el-select v-model="Goodsadd.shopsId" placeholder="请选择商品门店" style="width: 90%">
          <el-option
            v-for="item in allShops"
            :key="item._id"
            :label="item.name"
            :value="item._id"
            style="width: 100%"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="是否上架：" prop="state">
        <el-radio-group v-model="Goodsadd.state">
          <el-radio label="上架" value="上架"></el-radio>
          <el-radio label="库存" value="库存"></el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="库存图片" prop="imagePath"   >
        <!-- <input  type="file" @change="uploadImage"> -->
        <el-upload
          ref="upload"
          action="/goods/uploadImages"
          list-type="picture-card"
          :on-success="handleAvatarSuccess"
        >
          <i class="el-icon-plus"></i>
        </el-upload>

        <el-dialog :visible.sync="dialogVisible">
          <img width="100%" :src="dialogImageUrl" alt />
        </el-dialog>
      </el-form-item>

      <el-form-item>
        <el-button @click.prevent="uu(Goodsadd)">立即创建</el-button>
        <el-button @click="resetForm('Goodsadd')">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import axios from "axios";
import { createNamespacedHelpers } from "vuex";
const { mapState: mapState, mapActions: mapActions } = createNamespacedHelpers(
  "finishedGoods"
);
export default {
  data() {
    return {
      Goodsadd: {
        name: "",
        price: "",
        num: "",
        state: "",
        shopsId: "",
        storesId: "5ece73540eafe821bc8e5686",
        imagePath: ""
      },

      allShops: [],
      // ruleForm: {
      //   name: "",
      //   age: "",
      //   gender: "",
      //   classesId: "",
      //   imagePath: ""
      // },
      dialogImageUrl: "",
      dialogVisible: false,
      file: {}
    };
  },
  created() {
    this.getShops();
  },
  methods: {
    handleAvatarSuccess(response, file, fileList) {
      //  console.log(response);
      this.Goodsadd.imagePath = response.filename[0];
    },
    // 获取所有门店
    async getShops() {
      const { data } = await axios.get("/shops/getShops");
      // console.log(data);
      this.allShops = data.rows;
    },
    //新增商品
    async uu(goods) {
      console.log(goods);

      const { data } = await axios.post("goods/addGoods", goods);
      // context.dispatch("getStudentsAsync", data);
      if (data) {
        this.$message({
          type: "success",
          message: "新增成功！"
        });
        this.Goodsadd = {};
        this.$refs.upload.clearFiles();
      }
    },

    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    // ...mapActions(["addGoods"])
  },
  // computed: {
  //   ...mapState([""])
  // },
  // watch: {
  //   student(newValue) {
  //     this.student = newValue;
  //   }
  // }
};
</script>

<style>
.avatar-uploader {
  width: 50px;
  height: 50px;
}
.el-upload--picture-card {
  width: 100px;
  height: 100px;
  line-height: 100px;
}
.el-upload-list__item{
  width: 100px !important;
  height: 100px !important;
  line-height: 100px;
}
.el-icon-upload-success{
  position:absolute;
  right: 15px !important;
  top: -1px !important;
}
.el-breadcrumb {
  padding-left: 25px;
  height: 30px;
}
.el-form-item:nth-child(1),.el-form-item:nth-child(2),.el-form-item:nth-child(3){
  height: 30px;
}
.el-form-item:last-child{
  height: 20px;
}
</style>